<template>
  <view class="main">
    <!-- 头部 -->
    <scroll-view
      scroll-y="true"
      :scroll-with-animation="true"
      :scroll-top="scrollTop"
      @scroll="getScrollTop"
    >
      <view>
        <view class="content">
          <view id="plus">
            <!-- 详情内容 -->
            <view class="information">
              <view class="information_title">
                {{ dataList.title }}
              </view>
              <view class="information_cons">
                <view class="left ellipsis1">
                  文章来源:{{ dataList.resource }}
                </view>
                <view class="right"> 时间：{{ dataList.push_date }} </view>
              </view>
              <view class="image">
                <image
                  v-if="dataList.pic"
                  :showLoading="true"
                  :src="dataList.pic"
                  style="width: 650rpx; height: 320rpx"
                  mode="aspectFill"
                ></image>
              </view>
              <view
                class="information_content"
                :style="{ 'font-size': fontSize }"
              >
                <u-parse
                  v-if="showParse"
                  :content="dataList.content"
                  :lazyLoad="true"
                  :tagStyle="{
                    p: `font-size:${fontSize} !important`,
                    span: `font-size: ${fontSize} !important`,
                  }"
                  @linkTap="navigate"
                >
                </u-parse>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/consult/consultDetails"
></script>

<style lang="scss" scoped>
page {
  overflow: hidden;
  background-color: #fff;
}

.main {
  width: 100%;
	min-height: 100vh;
  background-color: #fff;
}

.content {
  background-color: #ffffff;
  min-height: 1000rpx;

  .information {
    padding: 0px 51rpx;
    padding-top: 34rpx;

    .information_title {
      font-size: 40rpx;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #333333;
      line-height: 56rpx;
    }

    .information_cons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      font-family: Source Han Sans CN-Normal, Source Han Sans CN;
      color: #666666;
      padding: 34rpx 0 52rpx 0;

      .left {
        width: 400rpx;
        line-height: 30rpx;
      }
    }
  }

  .information_content {
    width: 664rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 55rpx;
    margin-top: 40rpx;
  }

  .information_share {
    text-align: center;
    width: 330rpx;
    height: 84rpx;
    background: #ffffff;
    border-radius: 100px 100px 100px 100px;
    opacity: 1;
    border: 1px solid #d6d6d6;
    line-height: 84rpx;
    margin-left: 161rpx;
    margin-top: 60rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .image1 {
      display: flex;
      justify-content: space-around;
      align-items: center;

      image {
        width: 36rpx;
        height: 36rpx;
        margin-left: 10rpx;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        line-height: 36rpx;
      }

      .py {
        width: 156rpx;
        height: 40rpx;
        font-size: 26rpx;
        font-family: Source Han Sans CN-Normal, Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        line-height: 40rpx;
      }
    }
  }

  .tag {
    font-size: 24rpx;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    color: #999999;
    margin-top: 24rpx;
    text-align: center;
    padding-bottom: 52rpx;
  }
}

.showMore {
  text-align: center;

  .moreItem {
    padding: 34rpx 26rpx;
    box-sizing: border-box;
    width: 700rpx;
    margin: 12rpx auto;
    border-radius: 16rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 162rpx;
    }

    .item:last-child {
      margin-top: 30rpx;
    }

    .item:nth-last-child(2) {
      margin-top: 30rpx;
    }

    .icon {
      width: 87rpx;
      height: 85rpx;
    }

    .titleMore {
      margin-top: 20rpx;
      font-size: 26rpx;
      color: #646566;
    }
  }

  .close {
    line-height: 94rpx;
    background-color: #ffffff;
    width: 700rpx;
    height: 94rpx;
    margin: 12rpx auto;
    margin-bottom: 34rpx;
    border-radius: 16rpx;
  }
}

.image {
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
}

.chang_font_size {
  width: 700rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin: 12rpx auto;
  padding: 30rpx 60rpx;
  padding-bottom: 50rpx;

  .text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333333;
  }

  .subsection {
    margin: 0 22rpx;
    margin-top: 40rpx;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .line {
      width: 2rpx;
      height: 32rpx;
      background-color: #999999;
    }

    .line-x {
      height: 1rpx;
      width: 100%;
      background-color: #999999;
      position: absolute;
      left: 0;
    }

    .line-div {
      width: 60rpx;
      height: 32rpx;
      display: flex;
    }

    .primary {
      width: 38rpx;
      height: 38rpx;
      border: 8rpx solid #1c87f3;
      border-radius: 38rpx;
      background-color: #ffffff;
      position: absolute;
      transition: left 0.2s;
    }

    .primary1 {
      left: -17rpx;
    }

    .primary2 {
      left: calc(50% - 19rpx);
    }

    .primary3 {
      left: calc(100% - 19rpx);
    }
  }
}

.submit {
  font-size: 30rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #1c87f3;
  padding-left: 31rpx;
}

::v-deep .u-modal__content__text {
  text-align: center;
}

.class2 ::v-deep .u-modal__content__text {
  text-align: left;
}
</style>
